<template>
    <div class="box">
        <div class="box-left">
            <img :src="require('../../imger/圣巢一哥.jpg')" alt="示例图片">
        </div>
        <div class="box-right">
            <h1>企业级权限管理平台</h1>
            <h3>专业的RBAC权限管理与身份验证系统</h3>
            <el-form :model="user" :rules="rules" ref="loginFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <br>
                    <el-input v-model="user.username" class="yangs">
                        <i slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" type="password">
                    <br>
                    <el-input v-model="user.password" class="yangs">
                        <i slot="prefix" class="el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <br>
                    <div class="verificationCode">
                        <el-input v-model="user.code">
                        </el-input>
                        <div>1234</div>
                    </div>
                </el-form-item>
                <el-button type="primary" @click="handlerLogin" class="logon">登录</el-button>
                <div class="resetForm-container">
                    <el-link type="primary" @click="handlerReset">重置表单</el-link>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {
                username: '',
                password: '',
                code: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        handlerLogin() {
            this.$refs.loginFrom.validate().then(() => {
                this.$message({
                    message: '登陆成功',
                    type: 'success'
                    duration:1000,
                    onClose() =>  {
                        this.$router.push({
                            path:"/main",
                        });
                    },
                });
                
            }).catch(err => {
                this.$message({
                    message: '登陆失败',
                    type: 'error'
                    duration:1000,
                });
            });
        },
        handlerReset() {

        }
    }
}
</script>
<style lang="less" scoped>
.box {
    height: 100vh;
    display: flex;

    &-left img {
        height: calc(100vh - 5px)
    }
}

.yangs {
    width: 500px;
    margin-left: -50px;
}

.verificationCode {
    width: 300px;
    margin-left: -50px;
    display: flex;
}

.logon {
    width: 500px;
    margin-left: 50px;
}

.resetForm-container {
    text-align: center;
    margin-top: 10px;
}
</style>